<script setup lang="ts">
import type { FallbackProps } from "./type";
import { computed, defineAsyncComponent } from "vue";

interface Props extends FallbackProps {}

const props = withDefaults(defineProps<Props>(), {
  description: "",
  homePath: "/",
  image: "",
  showBack: true,
  status: "coming-soon",
  title: "",
});

const Icon403 = defineAsyncComponent(() => import("./icons/icon-403.vue"));
const Icon404 = defineAsyncComponent(() => import("./icons/icon-404.vue"));
const Icon500 = defineAsyncComponent(() => import("./icons/icon-500.vue"));
const IconHello = defineAsyncComponent(
  () => import("./icons/icon-coming-soon.vue")
);
const IconOffline = defineAsyncComponent(
  () => import("./icons/icon-offline.vue")
);

const titleText = computed(() => {
  if (props.title) {
    return props.title;
  }

  switch (props.status) {
    case "403": {
      return "哎呀！访问被拒绝";
    }
    case "404": {
      return "哎呀！未找到页面";
    }
    case "500": {
      return "哎呀！出错了";
    }
    case "coming-soon": {
      return "即将推出";
    }
    case "offline": {
      return "哎呀！网络错误";
    }
    default: {
      return "";
    }
  }
});

const descText = computed(() => {
  if (props.description) {
    return props.description;
  }
  switch (props.status) {
    case "403": {
      return "抱歉，您没有权限访问此页面。";
    }
    case "404": {
      return "抱歉，我们无法找到您要找的页面。";
    }
    case "500": {
      return "抱歉，服务器遇到错误。";
    }
    case "offline": {
      return "抱歉，无法连接到互联网，请检查您的网络连接并重试。";
    }
    default: {
      return "";
    }
  }
});

const fallbackIcon = computed(() => {
  switch (props.status) {
    case "403": {
      return Icon403;
    }
    case "404": {
      return Icon404;
    }
    case "500": {
      return Icon500;
    }
    case "coming-soon": {
      return IconHello;
    }
    case "offline": {
      return IconOffline;
    }
    default: {
      return null;
    }
  }
});

const showBack = computed(() => {
  return props.status === "403" || props.status === "404";
});

const showRefresh = computed(() => {
  return props.status === "500" || props.status === "offline";
});

// 返回首页
function backHome() {
  navigateTo(props.homePath);
}

// 刷新页面
function refreshPage() {
  window.location.reload();
}
</script>

<template>
  <div
    class="flex size-full flex-col items-center justify-center duration-300 -translate-y-24"
  >
    <img v-if="image" :src="image" class="md:1/3 w-1/2 lg:w-1/4" />
    <component
      :is="fallbackIcon"
      v-else-if="fallbackIcon"
      class="md:1/3 h-1/3 w-1/2 lg:w-1/4"
    />
    <div class="flex flex-col items-center justify-center">
      <slot v-if="$slots.title" name="title"></slot>
      <p
        v-else-if="titleText"
        class="text-foreground mt-8 text-2xl md:text-3xl lg:text-4xl"
      >
        {{ titleText }}
      </p>
      <slot v-if="$slots.describe" name="describe"></slot>
      <p
        v-else-if="descText"
        class="text-muted-foreground md:text-md my-4 lg:text-lg"
      >
        {{ descText }}
      </p>
      <slot v-if="$slots.action" name="action"></slot>
      <el-button v-else-if="showBack" @click="backHome">
        <Icon name="icon-park-outline:arrow-left" />
        返回首页
      </el-button>
      <el-button v-else-if="showRefresh" @click="refreshPage">
        <Icon name="icon-park-outline:refresh" />
        刷新
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
